<template>
	<view class="container">
		<!-- 1：顶端，返回箭头 -->
		<nav-bar :showBack="true" />
		<!-- 2：轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item class="rotation" v-for="(rotation, index) in rotationList">
				<image class="image" mode="scaleToFill" :src="rotation.advImg | imagePathCompletion" />
				<text class="title">{{ rotation.advTitle }}</text>
			</swiper-item>
		</swiper>
		<!-- 3：线路名称 - 站点名称 -->
		<view class="metros" v-if="metroList && metroList.length > 0">
			<view class="metro" v-for="(metro, index) in metroList" :key="index">
				<text class="current">{{ metro.lineName }} - {{ metro.currentName }}</text>
				<text class="next" v-if="metro.nextStep">下一站：{{ metro.nextStep.name }}</text>
				<text class="pre" v-if="metro.preStep">上一站：{{ metro.preStep.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRotationList,
		getMetroList
	} from '@/api/metro.js'
	export default {
		data() {
			return {
				name: null,

				rotationList: null,

				metroList: null
			}
		},
		onLoad(options) {
			this.name = options.name;
			this.getRotationList();
			this.getMetroList(this.name);
		},
		methods: {
			// 获取广告轮播列表
			getRotationList() {
				const _that = this;
				getRotationList()
					.then((res) => {
						_that.rotationList = res.rows;
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					});
			},
			getMetroList(name) {
				const _that = this;
				getMetroList(name)
					.then((res) => {
						_that.metroList = res.data;
						console.log((_that.metroList))
					});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.swiper {
			width: 100vw;
			height: 50vw;
			margin-bottom: 0.8rem;

			.rotation {
				width: 100vw;
				height: 50vw;
				overflow: hidden;
				position: relative;

				.image {
					width: 100vw;
					height: 50vw;
				}

				.title {
					position: absolute;
					width: 96%;
					height: 2em;
					padding: 0 2% 18px;
					color: white;
					line-height: 2em;
					overflow: hidden;
					background-color: rgba(0, 0, 0, 0.4);
					left: 0;
					bottom: 0;
					z-index: 9999;
				}
			}
		}

		.metros {
			width: 100%;
			padding: 0 4%;
			box-sizing: border-box;
			overflow: hidden;
			background-color: $uni-bg-color;

			.metro {
				width: 100%;
				padding: 0.6rem 0;
				overflow: hidden;
				border-bottom: 1rpx solid #dedede;
				
				.current {
					color: $uni-color-primary;
					font-size: 1.4rem;
					line-height: 3rem;
					display: block;
				}
				
				.next,
				.pre {
					width: 50%;
					line-height: 2rem;
					display: inline-block;
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
